<script setup lang="ts">
import {DeleteOutlined} from '@ant-design/icons-vue';
import {getListApi,authorizeList,deleteApi} from '~@/api/account'
import { notification } from 'ant-design-vue'

const { t } = useI18n()
const columns = shallowRef([
    {
        title: 'clientId',
        dataIndex: 'registeredClientId',
    },
    {
        title: '名称',
        dataIndex: 'registeredClientName',
    },
    {
        title: '权限',
        dataIndex: 'authorities',
    },
    {
        title: 'Action',
        dataIndex: 'action',
    },
])
const { state,query} = useTableQuery({
  queryApi: getListApi,
  afterQuery: (res) => {
    notification.success({message: '查询成功'})
    return res
  },
})
const message = useMessage()
async function handleDelete(record: authorizeList) {
  if (!record.registeredClientId)
    return message.error('id 不能为空')
  try {
    const res = await deleteApi(record.registeredClientId)
    if (res.code === 200||1000)
      await query()
    message.success('解除成功')
  }
  catch (e) {
    console.log(e)
  }
  finally {
    close()
  }
}
</script>

<template>
    <a-card :title="t('account.settings.authorize-info')" :bordered="false">
        <a-table row-key="id" :row-selection="state.rowSelections" :loading="state.loading" :columns="columns"
        :data-source="state.dataSource" :pagination="state.pagination">
        <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'authorities'">
                <span>
                    <a-tag v-for="tag in record.authorities" :key="tag.id" color="blue">
                        {{ tag.name }}
                    </a-tag>
                </span>
            </template>
            <template v-if="column.dataIndex === 'action'">
                <span>
                    <a-popconfirm title="确定解除该条授权信息？" ok-text="确定" cancel-text="取消"
                        @confirm="handleDelete(record as authorizeList)">
                        <a>
                            <DeleteOutlined />解除
                        </a>
                    </a-popconfirm>
                </span>
            </template>
        </template>
      </a-table>
    </a-card>
</template>

<style scoped lang="less">

</style>
